// src/components/SplashScreen.tsx
import React, { useEffect } from 'react';
import CSSMotion from 'rc-motion';
import { LoadingOutlined } from '@ant-design/icons';
import { Spin } from 'antd';

type SplashScreenProps = {
  logo?: string;          // logo 图片地址
  text?: string;          // 显示文字
  duration?: number;      // 持续时间 (ms)，默认 2000
  onFinish: () => void;   // 结束回调
};

const SplashScreen: React.FC<SplashScreenProps> = ({
  logo,
  text = '加载中...',
  duration = 2000,
  onFinish,
}) => {
  const [visible, setVisible] = React.useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setVisible(false); // 触发消失动画
      setTimeout(onFinish, 500); // 动画结束后再回调
    }, duration);

    return () => clearTimeout(timer);
  }, [duration, onFinish]);

  return (
    <CSSMotion visible={visible} motionName="fade">
      {({ style, className }) => (
        <div
          className={className}
          style={{
            ...style,
            position: 'fixed',
            inset: 0,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            background: '#fff',
            zIndex: 9999,
          }}
        >
          {logo ? (
            <img
              src={logo}
              alt="logo"
              style={{ width: 80, height: 80, marginBottom: 16 }}
            />
          ) : (
            <Spin
              indicator={<LoadingOutlined style={{ fontSize: 40 }} spin />}
              size="large"
            />
          )}
          <div style={{ marginTop: 8, fontSize: 16, color: '#333' }}>{text}</div>
        </div>
      )}
    </CSSMotion>
  );
};

export default SplashScreen;
